<template>
  <div>
    <div class="wrapper">
      <div class="userInput">
        <div class="inputBox">
          <x-input class="inputC" required v-model="subObject.username" placeholder="请输入用户名" ></x-input>
        </div>
        <div class="inputBox">
          <x-input class="inputC" required type="password" v-model="subObject.password" placeholder="请输入密码" ></x-input>
        </div>
        <div class="inputBox">
          <x-input class="inputC" required type="password" v-model="subObject.checkPassword" placeholder="请确认新密码" ></x-input>
        </div>
        <div class="inputBox">
          <x-input class="inputC"  v-model="subObject.email" placeholder="请输入您的邮箱" ></x-input>
        </div>
        <div class="inputBox">
          <x-input class="inputC" required v-model="subObject.realName" placeholder="请输入您的真实姓名" ></x-input>
        </div>
        <div class="inputBox">
          <x-input class="inputC" required v-model="subObject.mobile" placeholder="请输入手机号码" :max="11" max-length="11" keyboard="number" is-type="china-mobile"></x-input>
        </div>
        <div class="inputBox">
          <x-input :show-clear="false" class="inputC inputCD" v-model="subObject.smsCode" placeholder="请输入验证码" ></x-input>
          <div class="forget" @click="getSmsCode">{{getVerify}}</div>
        </div>
      </div>
      <div class="userInput">
        <div class="inputBox">
          <popup-picker title="请选择您的性别" required :data="sexList" v-model="defaultSex" value-text-align="right"></popup-picker>
        </div>
        <div class="inputBox headImgUpload">
          <div class="">设置头像(非必填)</div>
          <div class="imgItem needsclick" @click="upLoadImg()">
            <img class="iconC needsclick" :src="subObject.headImg ? subObject.headImg : require('@/assets/images/user/touxiang@3x.png')" >
          </div>
        </div>
      </div>
      <div class="filelist">
        <img :src="item" alt="" v-for="(item, index) in fileList" :key="index">
      </div>
      <qiniu ref="uploadFiles" class="needsclick" @selectFinish="getUploadImg"></qiniu>
      <div class="loginBtn" @click="login">
        确认
      </div>
    </div>
  </div>
</template>

<script>
import { mineApi } from '@/api'
import qiniu from '@/components/qiniu/qiniu'
import { XInput, PopupPicker } from 'vux'
const years = []
for (var i = 2000; i <= 2030; i++) {
  years.push({
    name: i + '年',
    value: i + ''
  })
}
export default {
  components: {
    XInput,
    PopupPicker,
    qiniu
  },
  async created() {
  },
  data() {
    return {
      topResource: {
        centerCont: ''
      },
      getVerify: '获取验证码',
      whiteList: ['headImg', 'email'],
      fileList: [],
      subObject: {
        email: '',
        headImg: '',
        mobile: '',
        password: '',
        realName: '',
        sex: '',
        username: '',
        checkPassword: ''
      },
      defaultSex: ['保密'],
      sexList: [
        ['男', '女', '保密']
      ],
      inviteCode: '',
      inviteInfo: {}
    }
  },
  methods: {
    async getSmsCode() {
      if (this.getVerify !== '获取验证码' && this.getVerify !== '重新获取验证码') {
        return
      }
      if (!this.subObject.mobile || this.subObject.mobile.length < 11) {
        this.$toast('请输入正确的手机号')
        return
      }
      const res = await mineApi.getSms({
        mobile: this.subObject.mobile
      })
      if (res.code) {
        return
      }
      this.$toast('短信发送成功，请注意查收！')
      this.value = 60
      this.getVerify = this.value + 's后重发'
      var timers = setInterval(() => {
        this.value--
        this.getVerify = this.value + 's后重发'
        if (this.value <= 0) {
          clearInterval(timers)
          this.getVerify = '重新获取验证码'
        }
      }, 1000)
    },
    upLoadImg() {
      console.log('upLoadImg')
      this.$refs.uploadFiles.museClick()
    },
    getUploadImg(url, file) {
      this.fileList.push(url)
      // this.subObject.headImg = url
    },
    async login() {
      console.log('login')
      if (this.password !== this.checkPassword) {
        this.$toast('两次输入的密码不一致')
        return
      }
      let canSub = true
      for (const x in this.subObject) {
        if (!this.subObject[x]) {
          console.log('x', x)
          if (this.whiteList.indexOf(x) < -1) {
            canSub = false
          }
        }
      }
      if (!canSub) {
        this.$toast('请完整填写信息')
        return
      }
      switch (this.defaultSex[0]) {
        case '保密':
          this.subObject.sex = 0
          break
        case '男':
          this.subObject.sex = 1
          break
        case '女':
          this.subObject.sex = 2
          break
        default:
          this.subObject.sex = 0
          break
      }
      const res = await mineApi.register(this.subObject)
      console.log('res', res)
      if (res.code !== 200) {
        return
      }
      this.$toast('注册成功')
      this.$router.push('/login')
    },
    change() {
      console.log('change')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/assets/css/mixin.scss";
@import 'src/assets/css/variables.scss';
  .wrapper {
    position: fixed;
    left: 0;
    top: 0;
    background: #f0f0f0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /*background-color: #000;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    .userInput{
      padding: 0 10px;
      margin-bottom: 10px;
      background-color: #fff;
      width: 100%;
      .inputBox{
        position: relative;
        .inputC{
          position: relative;
          border-top: none;
          border-bottom: 1px solid #ddd;
          &::before{
            border: none;
          }
        }
        .forget{
          color: $color-theme;
          position: absolute;
          right: 0;
          top: 0;
          line-height: 44px;
        }

      }
      .headImgUpload{
        height: 60px;
        display: flex;
        align-items: center;
        padding: 15px;
        justify-content: space-between;
        .imgItem{
          img{
            width: 40px;
          }
        }
      }
    }
    .loginBtn{
      margin-top: 20px;
      font-size: 16px;
      color: white;
      /* background: -webkit-linear-gradient(left, #A38456, #CABA96); */
      background-color: $color-theme;
      line-height: 41px;
      text-align: center;
      border-radius: 5px;
      width: 80%;
    }
    .toRegister{
      color: $color-theme;
      text-decoration: underline;
      margin-top: 15px;

    }
  }
</style>
